<template>
  <div class="stu-card-container" @click="stuDetail">
    <div class="student_avatar">
      <img src="~images/common/student_avatar.png" />
    </div>
    <div class="student-name">{{studentInfo.staff_name}}</div>
    <div class="student-gender">{{studentInfo.staff_age}}</div>
    <div class="student-dormitory">{{studentInfo.build_name}}</div>
    <div class="student-class">{{studentInfo.class_name}}</div>
    <div class="contact-text">{{studentInfo.late_time | formateTime }} {{ remark }}</div>
    <div class="tel-icon-container">
      <img class="tel-icon" src="~images/common/stu_tel.png" />
    </div>
    <div class="con-tel">{{studentInfo.staff_tel}}</div>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default:() => {},
    },
    remark: {
      type: String,
      default: '最后入闸',
    },
  },
  data() {
    return {
      studentInfo: this.info,
    }
  },
  methods: {
    stuDetail() {
      this.$router.push({
        name: 'panelStuDetail',
        params: {
          stuId: this.info.id,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
$font-family-medium: var(--font-family-medium);
$color-deep-blue: var(--color-deep-blue);
$color-shallow-blue: var(--color-shallow-blue);
$color-white: var(--color-white);
$color-line-green: var(--color-light-green);
/* 卡片 主体 */
.stu-card-container {
  position: relative;
  height: 94px;
  background: $color-white;
  border-bottom: 1px solid #eeeff3;
  .student_avatar {
    position: absolute;
    left: 25px;
    top: 16px;
    $avatar-width: 36px;
    width: $avatar-width;
    height: $avatar-width;
    border: 1px dashed #8c97b2;
    img {
      width: 100%;
      height: 100%;
      border-radius: 18px;
    }
  }
  .student-name {
    position: absolute;
    left: 71px;
    top: 18px;
    font-size: 14px;
    font-family: $font-family-medium;
    font-weight: 500;
    color: $color-deep-blue;
    line-height: 14px;
  }
  .student-gender {
    position: absolute;
    right: 24px;
    top: 18px;
    font-size: 14px;
    font-family: $font-family-medium;
    font-weight: 500;
    color: $color-shallow-blue;
  }
  .student-dormitory {
    position: absolute;
    top: 40px;
    left: 70px;
    width: 98px;
    height: 12px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C97B2;
  }
  .student-class {
    position: absolute;
    top: 40px;
    right: 23px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C97B2;
  }
  .contact-text {
    position: absolute;
    left: 24px;
    top: 66px;
    width: 125px;
    font-size: 12px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #DD563F;

  }
  .tel-icon-container {
    display: grid;
    place-items: center;
    position: absolute;
    top: 64px;
    right: 121px;
    width: 16px;
    height: 16px;
    border: 1px dashed #8c97b2;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .con-tel {
    position: absolute;
    top: 66px;
    right: 24px;
    font-size: 14px;
    font-family: $font-family-medium;
    font-weight: 500;
    color: $color-line-green;
    line-height: 14px;
  }
}
</style>